<template>
  <div id="app" class="app">
    <div data-v-66cc49b8="" class="login-wraper">
      <img
        data-v-66cc49b8=""
        alt="logo"
        src="https://xbongbong.oss-cn-hangzhou.aliyuncs.com/xbbproweb/4.77.2.18a/static/img/login-logo.b0294f7.png"
        class="login-logo"
      />
      <img
        data-v-66cc49b8=""
        alt="logo"
        src="https://xbongbong.oss-cn-hangzhou.aliyuncs.com/xbbproweb/4.77.2.18a/static/img/login-logo-work-order.088f1ac.png"
        class="login-logo"
        style="display: none"
      />
      <div data-v-66cc49b8="" class="login-content">
        <div data-v-66cc49b8="" class="login-left">
          <img
            data-v-66cc49b8=""
            height="auto"
            src="https://xbongbong.oss-cn-hangzhou.aliyuncs.com/xbbproweb/4.77.2.18a/static/img/color-bg.317d1ac.png"
            width="400"
          />
          <img
            data-v-66cc49b8=""
            height="auto"
            src="https://xbongbong.oss-cn-hangzhou.aliyuncs.com/xbbproweb/4.77.2.18a/static/img/color-bg-work-order.dce82de.png"
            width="400"
            style="display: none"
          />
        </div>
        <div data-v-66cc49b8="" class="login-right">
          <div data-v-66cc49b8="" class="login-right__tab">
            <div
              data-v-66cc49b8=""
              class="login-right__tab--title login-right__tab--active"
            >
              登录CRM
            </div>
            <div
              data-v-66cc49b8=""
              class="login-right__tab--title login-right__tab--last"
            >
              登录服务云
            </div>
          </div>
          <div data-v-66cc49b8="">
            <el-form :model="form" :rules="rules" ref="formRef" class="el-form input-block">
              <div
                data-v-66cc49b8=""
                class="el-form-item is-required el-form-item--small"
              >
                <!---->
                <el-form-item prop="username" class="el-form-item__content">
                  <div
                    data-v-66cc49b8=""
                    class="el-input el-input--medium el-input--suffix"
                  >
                    <!----><el-input
                      v-model="form.username"
                      type="text"
                      autocomplete="off"
                      placeholder="请输入账号"
                    /><!----><!----><!----><!---->
                  </div>
                  <!---->
                </el-form-item>
              </div>
              <!---->
              <!---->
              <!---->
              <div
                data-v-66cc49b8=""
                class="el-form-item is-required el-form-item--small"
              >
                <!---->
                <div class="el-form-item__content">
                  <el-form-item
                    prop="password"
                    data-v-66cc49b8=""
                    class="input-block__line input-number"
                  >
                    <div
                      data-v-66cc49b8=""
                      class="el-input el-input--medium el-input--suffix"
                    >
                      <!----><el-input v-model="form.password"
                        type="password"
                        autocomplete="off"
                        placeholder="请输入密码"
                        
                      /><!----><!----><!----><!---->
                    </div>
                  </el-form-item>
                  <!---->
                </div>
              </div>
              <div data-v-66cc49b8="" class="el-form-item el-form-item--small">
                <!---->
                <div class="el-form-item__content">
                  <!---->
                </div>
              </div>
              <!---->
              <!---->
              <!---->
              <!---->
              <div data-v-66cc49b8="" class="el-form-item el-form-item--small">
                <!---->
                <div class="el-form-item__content">
                  <el-button
                    @mouseenter="handleMouseEnter"
                    @mouseleave="handleMouseLeave"
                    @click="submitForm"
                    data-v-66cc49b8=""
                    type="primary"
                    class="el-button input-block__submit el-button--medium"
                    :class="{'is-disabled' : !isFormValid}"
                    :disabled="!isFormValid"
                  >
                    <!----><!----><span>登录</span>
                  </el-button>
                  <div data-v-66cc49b8="" class="input-block__back"></div>
                  <!----><!---->
                </div>
              </div>
              <div data-v-66cc49b8="" class="el-form-item el-form-item--small">
                <!---->
              </div>
            </el-form>
          </div>
          <!---->
        </div>
      </div>
      <!---->
    </div>
  </div>
</template>

<script>
import { watch } from 'vue';

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          // 可以添加其他验证规则，如密码长度等...
        ],
      },
      isFormValid: false,
      isHovering: true,
    };
  },
  methods: {
    validateForm() {
      this.$refs.formRef.validate((valid) => {
        
        this.isFormValid = valid; // 更新按钮的禁用状态
      });
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert("提交成功!");
          console.log("提交成功");
          // 可以在这里处理表单提交的逻辑
        } else {
          console.log("表单验证失败!");
          return false;
        }
      });
    },
    handleMouseEnter() {
      // 当鼠标进入元素时触发
      console.log("进入了");
      this.isHovering = false;
    },
    handleMouseLeave() {
      // 当鼠标离开元素时触发
      console.log("离开了");
      this.isHovering = true;
    },
    
  },
  watch: {
    // 监听表单字段的变化，并在变化时重新验证表单
    // 注意：这可能会导致性能问题，特别是当表单字段很多时
    // 在实践中，您可能只需要在用户尝试提交表单时验证表单
    'form.username': function() {
      this.validateForm();
    },
    'form.password': function() {
      this.validateForm();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
.app {
  height: 100%;
}
.login-wraper {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  min-width: 800px;
  position: relative;
}
.el-button--primary:hover {
  /* 定义鼠标悬停时的样式 */
  background-color: #42b9af !important; /* 举例：改变背景色 */
  border-color: #42b9af !important; /* 如果需要的话，也改变边框色 */
}
.login-logo {
  left: 36px;
  position: absolute;
  top: 36px;
  width: 136px;
}
.login-content {
  border-radius: 8px;
  box-shadow: 0 1px 12px 0 rgb(0 0 0 / 10%);
  display: flex;
  height: 500px;
  overflow: hidden;
  width: 800px;
  margin-top: 200px;
}
.login-left {
  align-items: center;
  background-color: #f2f3f5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.login-right {
  box-sizing: border-box;
  padding: 40px 40px 0;
}
.login-right__tab--active {
  color: #323233;
}
.login-left,
.login-right {
  height: 100%;
  overflow: hidden;
  width: 400px;
}
.login-right__tab {
  align-items: center;
  color: #969799;
  cursor: pointer;
  display: flex;
  font-style: normal;
}
.login-right__free,
.login-right__tab {
  font-size: 20px;
  margin-bottom: 32px;
}
.login-right__tab {
  align-items: center;
  color: #969799;
  cursor: pointer;
  display: flex;
  font-style: normal;
}
.input-block {
  margin: 0 0 20px;
}
.el-form-item--small.el-form-item {
  margin-bottom: 18px;
}
.el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  line-height: 32px;
}
.el-form-item__content {
  font-size: 14px;
  line-height: 40px;
  position: relative;
}
.el-input--medium {
  font-size: 14px;
}
.el-input {
  display: inline-block;
  font-size: 14px;
  position: relative;
  width: 100%;
}
.login-right .el-input__inner {
  height: 40px;
  line-height: 40px;
}
.el-input--medium .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.el-input--suffix .el-input__inner {
  padding-right: 30px;
}
.el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.login-right__tab--title:after {
  color: #c9cdd4;
  content: "|";
  margin: 0 20px;
}
.login-right__tab--last:after {
  display: none;
}

.el-form-item:after {
  clear: both;
}

.el-form-item:after,
.el-form-item:before {
  content: "";
  display: table;
}
.el-form-item__content:after {
  clear: both;
}
.el-form-item__content:after,
.el-form-item__content:before {
  content: "";
  display: table;
}
.input-block__submit[data-v-66cc49b8] {
  font-size: 18px;
  height: 40px;
  letter-spacing: 6px;
  margin-top: 30px;
  width: 100%;
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.is-disabled:hover {
  background-color: #ffc78b !important;
  border-color: #ffc78b !important;
  color: #fff !important;
}
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.is-disabled:hover {
  background-color: #ffc697;
  border-color: #ffc697;
  color: #fff;
}
.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  background-color: #fff;
  background-image: none;
  border-color: #ebeef5;
  color: #c0c4cc;
  cursor: not-allowed;
}
.el-button--primary {
  background-color: #ff6a00 !important;
  border-color: #ff6a00 !important;
  color: #fff !important;
}
.el-button--medium {
  border-radius: 4px;
  font-size: 14px;
  padding: 10px 20px;
}
.el-button--primary {
  background-color: #ff8c2e;
  border-color: #ff8c2e;
  color: #fff;
}
.el-button {
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  color: #606266;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  outline: none;
  padding: 12px 20px;
  text-align: center;
  transition: 0.1s;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  white-space: nowrap;
}
* {
  margin: 0;
  padding: 0;
}
button:disabled {
  background-color: -internal-light-dark(
    rgba(239, 239, 239, 0.3),
    rgba(19, 1, 1, 0.3)
  );
  color: -internal-light-dark(rgba(16, 16, 16, 0.3), rgba(255, 255, 255, 0.3));
  border-color: -internal-light-dark(
    rgba(118, 118, 118, 0.3),
    rgba(195, 195, 195, 0.3)
  );
}
button {
  appearance: auto;
  writing-mode: horizontal-tb !important;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  cursor: default;
  box-sizing: border-box;
  margin: 0em;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonborder;
  border-image: initial;
}
.el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  line-height: 32px;
}
.el-form-item__content {
  font-size: 14px;
  line-height: 40px;
  position: relative;
}
</style>
